<template>
  <div class="main">
    <div class="head">
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo" />
      </div>
      <van-search class="input" v-model="value" @focus="onSearchFocus" placeholder="搜索食谱" />
      <div @click="() => {
        router.push({ path: '/Identify' });
      }">
        <img src="@/assets/food.svg" alt="">
      </div>
    </div>
    <div class="banner">
      <van-swipe :autoplay="2000" lazy-render>
        <van-swipe-item v-for="item in images" @click="goToComponent(item.route)">
          <img :src="item.path" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 今日推荐 -->
    <recommend></recommend>

    <!-- 美食社区 -->
    <div class="community">
      <div class="community-top">
        <div class="community-top-title">美食社区</div>
        <div class="community-top-more" @click="() => {
          router.push({ path: '/community' });
        }">查看更多</div>
      </div>
      <commonItem :currentData="data"></commonItem>
    </div>
  </div>
</template>

<script setup>
import recommend from '@/components/recommend.vue';
import router from '@/router/index.js';
import { getCookByHome } from '@/api'
import { onMounted, ref } from 'vue';
import commonItem from '@/components/commonItem.vue';

const data = ref({})
// const images = [
//   'https://aigc-files.bigmodel.cn/api/cogview/2025051801535426cb90f6b7d741c0_0.png',
//   'https://aigc-files.bigmodel.cn/api/cogview/20250527234744ed763bcdd02c4e72_0.png',
//   'https://aigc-files.bigmodel.cn/api/cogview/20250527235422c3692a7305a945c2_0.png',
// ];

const images = [{
  path: 'https://aigc-files.bigmodel.cn/api/cogview/2025051801535426cb90f6b7d741c0_0.png',
  route: '/Identify'
}, {
  path: 'https://aigc-files.bigmodel.cn/api/cogview/20250527234744ed763bcdd02c4e72_0.png',
  route: '/community'
}, {
  path: 'https://aigc-files.bigmodel.cn/api/cogview/20250527235422c3692a7305a945c2_0.png',
  route: '/editCook'
}]

onMounted(async () => {
  const res = await getCookByHome();
  data.value = res.data
})

const onSearchFocus = () => {
  router.push({ path: '/search' });
}

const goToComponent = (route) => {
  router.push({ path: route });
}

</script>

<style lang="less" scoped>
.main {
  background-color: #F0F1F2;

  .head {
    height: 45px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    .logo {
      height: 100%;

      img {
        height: 100%;
        object-fit: contain;
      }
    }

    .input {
      flex: 1;
      height: 100%;
    }
  }

  .banner {
    margin: 8px 0px;
    margin-top: 50px;
    width: 100%;

    img {
      width: 100%;
      border-radius: 8px;
    }
  }

  .function {
    padding: 0.4rem;

    ul {
      display: flex;
      justify-content: space-between;

      li {
        display: block;
        width: 2.8rem;
        height: 2.5rem;
        padding: 0.32rem 0.64rem;
        box-sizing: border-box;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px;

        img {
          display: block;
          margin: 0 auto;
        }

        p {
          text-align: center;
          margin-top: 8px;
          font-size: 0.37rem;
        }
      }
    }
  }

  .community {
    margin-top: 20px;
    margin-bottom: 60px;
    background-color: #fff;
    padding-top: 10px;

    &-top {
      display: flex;
      padding: 8px;
      justify-content: space-between;
      align-items: center;

      &-title {
        font-weight: 600;
        font-size: 16px;
        color: #000000;
      }

      &-more {
        font-size: 14px;
        font-weight: normal;
        color: #FF9966;
      }
    }
  }
}
</style>